<template>
	<view v-for="(item, index) in props.list" :key="index" class="cu-card case " :class="props.isCard ? 'no-card' : ''">
		<view class="cu-item shadow" @click="handleRoute(item)">
			<view class="weightNotes bg-white  align-center">
				<view class="content">
					<view class="flex justify-between align-center padding-sm">
						<view>
							<text v-if="item.orderType==1" class="cu-tag round bg-orange padding-lr-sm">堂食</text>
							<text v-if="item.orderType==2" class="cu-tag round bg-menu padding-lr-sm">外卖配送</text>
							<text v-if="item.orderType==3" class="cu-tag round bg-blue padding-lr-sm">到店自提</text>
							<text class="text-size-16 text-red text-blod margin-left-xs">{{item.serialNum||'暂无'}}</text>
						</view>
						<view class="flex align-center">
							<view class="text-gray text-size-14">{{ getStatus(item.state) }}</view>
							<view class="text-gray cuIcon-right margin-left-sm"></view>
						</view>
					</view>
					<view class="cu-line"></view>
					<view class="padding-sm">
						<view class="flex padding-bottom-sm  align-center">
							<view class="cu-tags">
								<view class="cu-tag round  bg-menu" v-for="(item2, index2) in item.detailList"
									:key="index2">
									{{item2.productName||"获取失败"}}
									<text class="margin-left-xs">x{{item2.num}}</text>

								</view>
							</view>
						</view>
						<view v-if="item.userAddress" class="flex align-center">
							<view class="text-gray">
								<text class="text-size-14 cuIcon-locationfill"></text>
								<text
									class="text-size-14 text-gray margin-left-xs">{{item.userAddress.housingEstate}}{{ item.userAddress.detail? item.userAddress.detail: '暂无' }}</text>
							</view>
						</view>
						<view v-if="item.opinion" class="flex align-center">
							<view class="text-red">
								<text
									class="text-size-14">{{item.opinion }}</text>
							</view>
						</view>
						
						<view class="flex justify-content-between  align-center ">
							<view class="text-gray text-size-14 margin-left-xs">
								{{ item.buyTime ? item.buyTime : '暂无' }}
							</view>
							<view class="text-gray text-size-12">
								<text
									class="margin-right-sm">共{{ item.detailList ? item.detailList.length : 0 }}份</text>
								<text class="text-size-16 text-bold  text-red">￥{{ item.amount }}</text>
								<text v-if="item.refundAmount>0" class="text-size-14 text-bold margin-left-sm  text-red">
								
								退款￥{{ item.refundAmount }}</text>
							</view>
						</view>
						<view class="flex justify-content-between  align-center margin-top-xs">
								<button @click.stop="handleRouteTruckspath(item)" v-if="item.sfId&&item.sfId.length>0"
									class="cu-btn round  line-gray margin-lr-xs">查看配送</button>
								<button @click.stop="handleSelect(item,1)" v-if="item.state>=5"
									class="cu-btn round  line-gray margin-lr-xs">退款</button>
								<button @click.stop="handleSelect(item,2)" v-if="item.state==5||item.state==6"
									class="cu-btn round  line-gray margin-lr-xs">分配员工</button>
								<button @click.stop="handleSelect(item,3)" v-if="item.state>=5&&item.state<9"
									class="cu-btn round  line-gray  margin-lr-xs">修改</button>
								<button @click.stop="handleSelect(item,4)" v-if="item.state==5||item.state==6||item.state==7"
									class="cu-btn round  line-gray margin-lr-xs">开始服务</button>
								<button @click.stop="handleSelect(item,5)" v-if="item.state==8"
									class="cu-btn round  line-gray margin-lr-xs">结束服务</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: function () {
				return [
					{
						"id": "23257734198000150",
						"userId": "21961706390000181",
						"courierFeeId": null,
						"shopId": "17379006305000199",
						"nickname": "李四",
						"phone": "18716643045",
						"avatarUrl": null,
						"opinion":"",
						"userAddressId": "23256973539000144",
						"orderCode": "231227172954195",
						"serialNum": "0003",
						"orderType": 3,
						"amount": 2.00,
						"payAmount": 2.00,
						"expressPrice": 0.00,
						"packPrice": 1.00,
						"integral": 0,
						"productNum": 1,
						"refundAmount": 0,
						"buyTime": "2023-12-27 17:29:54",
						"payTime": "2023-12-27 17:30:11",
						"reservationTime": null,
						"cancelTime": "2023-12-27 17:37:52",
						"payType": 2,
						"state": 5,
						"remark": "",
						"sfId": "",
						"userAddress": {
							"id": "",
							"userId": "",
							"realName": "",
							"phone": "",
							"gender": 1,
							"housingEstateId": "",
							"detail": "",
							"postCode": "",
							"longitude": 103.98742848011307,
							"latitude": 30.64813289751431,
							"defaultAddress": true,
							"housingEstate": ""
						},
						"detailList": [{
							"id": "23257734202000108",
							"orderId": "23257734198000150",
							"productId": "19052833070000150",
							"productName": null,
							"attrValue": null,
							"thumbnail": null,
							"amount": 2.00,
							"num": 1
						}]
					}
				];
			}
		},
		height: {
			type: String,
			default: '80vh'
		},
		load: {
			type: [Boolean, String],
			default: true
		}
	});
	const statusList = [
		{
			id: 0,
			name: '待支付'
		}, {
			id: 1,
			name: '支付中'
		},
		{
			id: 2,
			name: '支付失败'
		},
		{
			id: 3,
			name: '已取消'
		},
		{
			id: 4,
			name: '已退款'
		},
		{
			id: 5,
			name: '支付成功'
		},
		{
			id: 6,
			name: '商家待确定'
		},
		{
			id: 7,
			name: '已接单'
		},
		{
			id: 8,
			name: '配送中'
		},
		{
			id: 9,
			name: '配送完成'
		},
		{
			id: 10,
			name: '已完成'
		},
		{
			id: 11,
			name: '申请售后'
		},
		{
			id: 12,
			name: '售后完成'
		}
	];
	const handleRoute = (e : any) => {
		uni.navigateTo({
			url: '/manage/order/orderdetalis?orderId=' + e.id
		});
	};

	const handleRouteTruckspath = (e : any) => {
		uni.navigateTo({
			url: '/pages/order/truckspath?id=' + e.id
		});
	};
	const handleSelect = (value : any, type : any) => {
		emit('action', value, type);
	};
	const getStatus = (e : number) => {
		const item = statusList.find(obj => {
			return obj.id == e;
		});
		if (item) {
			return item.name;
		} else {
			return '未知';
		}
	};
	const roleInfo = ref({
		label: '管理员',
		value: 'admin',
		path: '/manage/index/manager'
	})
	onMounted(() => {
		uni.getStorage({
			key: 'role',
			success: function (res) {
				console.log(res.data);
				if (res.data) {
					let info = setting.routerList.find((obj : any) => obj.value == res.data);
					if (info) {
						roleInfo.value = info
					}
				}
			}
		});
	})
</script>

<style>
	.cu-item {
		margin-top: 0;
		border: 1px solid #efefef;
	}

	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10rpx;
		margin: 10rpx 20rpx 10rpx 20rpx;
		box-shadow: 0px 2px 4px 0px rgba(200, 200, 200, 0.5), 0px 2px 4px 0px rgba(200, 200, 200, 0.5);
		border-radius: 8px;
	}
</style>